<template>
  <div class="indexbox" style="overflow:hidden">
    <div class="onebox" v-if="oneoterbox">
      <div class="bannerbox">
        <!--<img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt=""/>-->
        <img class="backimg" src="http://o928reoe7.bkt.clouddn.com/1048447759224295424.jpg" alt=""/>
      </div>
      <div class="positopbox">
        <div class="bullet_screen" v-for="(item,index) in bulletlista"
             :style="{top:0,left:item.left+ 'rem'}" >
          <img class="bulletimg l" :src="homeStr.bannerPic" alt=""/>
          <p class="l backg">{{item.msg}}</p>
        </div>
      </div>
      <nav :style="{backgroundImage: 'url(' + homeStr.bannerPic + ')', backgroundSize:'cover'}">


        <div class="bullet_screen" v-for="(item,index) in bulletlist"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem'}" :key="index">
          <img class="bulletimg l" :src="homeStr.bannerPic" alt=""/>
          <p class="l backg">{{item.msg}}</p>
        </div>
      </nav>
      <div class="jtbox">
        <div class="l">》》》》》》</div>
        已有 {{homeStr.num}} 人参与活动
        <div class="r">》》》》》》</div>
      </div>
      <div class="count_down box_siz">
        <div class="showTimebox">{{d}}天 {{h}}时{{m}}分{{s}}秒</div>
        <div class="dot">······································································</div>
        <p class="notxt">距离活动结束</p>
      </div>
      <!--huodongguize-->
      <div :class="showTotal?'activity_rules':'delte_activity_rules'">
        <p class="act_title">活动规则</p>
        <p :class="showTotal?'act_main':'detailed_actmain'">{{homeStr.rule}}</p>
        <img class="btmimg" src="../../assets/images/newimg/dbx546@2x.png" alt=""/>
      </div>
      <img class="centImg" src="../../assets/images/newimg/z123@2x.png" alt=""/>

      <!--shangjia style="width:11rem;"-->
      <div class="indexmerchantbox" style="padding-left: 0;height:auto;">
        <div class="swiper-container swiper-containerabc" style="width:100%;height:auto;">
          <div class="swiper-wrapper" style="height:auto;">
            <div class="swiper-slide" style="padding-right:0.1rem;" v-for="(item,index) in business.business" :key="index">
              <router-link :to="'/shop/'+item.businessId+''">
                <img class="marimg" :src="item.businessPic" alt=""/>
                <p class="martxt">{{item.businessName}}</p>
              </router-link>
            </div>

          </div>
        </div>
      </div>

      <!--siwper-->
      <!--1--><!--iphone_site-->
      <div class="swiper-container swiper-container1 swiper-no-swiping">
        <div class="swiper-wrapper swiper-wrapper1">
          <div class="swiper-slide swiper-slide1" v-for="(item,index) in business.mainBusiness" :key="index">
            <div class="iphone_sitebox box_siz">
              <img class="titleimg l" :src="item.mainBusinessPic" alt=""/>
              <div class="maxw l">
                <p class="iphNumber"><img class="dhimg" src="../../assets/images/newimg/WechatIMG3595.png"/>
                  {{item.mainBusinessName}}</p>
                <a :href="'tel:' + item.mainBusinessPhone"><p class="iphNumber"><img class="dhimg"
                                                                                     src="../../assets/images/newimg/dh(1)@2x.png"/>
                  {{item.mainBusinessPhone}}</p></a>
                <p class="site"><img class="dzimg" src="../../assets/images/newimg/dz(4)@2x.png" alt=""/>
                  {{item.mainBusinessAddress}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination">
        </div>
      </div>
      <div class="siwperOuterbox" style="height:auto;">
        <div class="l lbox"></div>
        <div class="r rbox"></div>
        <!--2-->
        <div class="swiper-container swiper-container2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(str,index) in business.mainBusiness" :key="index"
                 :style="{ backgroundImage: 'url(' + str.mainBusinessVipCardImg + ')' }">
              <router-link :to="'/shop/'+str.mainBusinessId+''" style="display: block;
      width: 100%;
      height: 100%;"></router-link>
            </div>
          </div>
          <div class="swiper-pagination">
          </div>
        </div>
      </div>

      <!---->
      <div class="decoratebox">
        <span>····</span>
        <img src="../../assets/images/newimg/z124@2x.png" alt=""/>
        <span>····</span>
      </div>
      <img class="centImg" src="../../assets/images/newimg/WechatIMG3587.png" alt=""/>
      <!---->
      <div class="footerbox box_siz">
        <div class="overflowbox">
          <div class="NumListbox box_siz" v-for="(item,index) in moneyAry" :key="index">
            <!--<p class="numbertxt l">{{index+1}}</p>-->
            <img class="sortImg l" :src="item.userHeadImg" alt=""/>
            <div class="sortpeple l" style="width:43%;">
              <p style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 0.88rem;">{{item.userName}}</p>
              <!--<p>{{item.disNum}}</p>-->
            </div>
            <p class="moneyshow r">{{item.disMoney}}元</p>
          </div>


        </div>
      </div>
      <!--tijiao-->
      <div class="btmouter_box">
        <div class="btn l" style="border-radius: 0;" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/Invitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtn r">分享赚钱</div>
        </router-link>
      </div>
      <!--position-->
      <div style="width:1.5rem;height:1.5;position: fixed;left: 0.1rem;bottom: 50%;z-index: 999;">
        <router-link to="/joinIn">
          <img src="../../assets/images/newimg/WechatIMG87.png" alt="">
        </router-link>
      </div>
      <ul class="tposibox">
        <li><a :href="'tel:' + homeStr.phone"><img src="../../assets/images/newimg/WechatIMG88.png" alt=""/></a>
        </li>
        <li>
          <router-link :to="'/myOrder/'+this.activityId+'/'+this.userOpenId+''">
            <img src="../../assets/images/newimg/WechatIMG89.png" alt=""/>
          </router-link>
        </li>
      </ul>

    </div>
    <!--popwindow-->
    <div id="opens_windows" v-show="popWindow" style="text-align:center;">

      <div class="windowbox_center">
        <div class="rqewm">扫码入群，极速了解核销流程</div>
        <img class="zfbimg" :src="homeStr.groupPic" alt=""/>
        <div @click="closeWind" class="sure_btns">X</div>
      </div>
    </div>
    <!--========第二版===========-->
    <div class="twobox" v-if="twoouterbox">
      <div class="bannerbox">

      </div>
      <div class="positopbox">
        <div class="bullet_screen" v-for="(item,index) in bulletlista"
             :style="{top:0,left:item.left+ 'rem'}" >
          <img class="bulletimg l" :src="homeStr.bannerPic" alt=""/>
          <p class="l backg">{{item.msg}}</p>
        </div>
      </div>
      <nav :style="{backgroundImage: 'url(' + homeStr.bannerPic + ')', backgroundSize:'cover'}">
        <div class="bullet_screen" v-for="(item,index) in bulletlist"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem'}" :key="index">
          <img class="bulletimg l" :src="homeStr.bannerPic" alt=""/>
          <p class="l backg">{{item.msg}}</p>
        </div>
      </nav>
      <div class="jtbox tjtbox">
        已有{{homeStr.num}}人参与活动
      </div>
      <div class="count_down tcount_down box_siz">
        <div class="showTimebox tshowTimebox">{{d}}天 {{h}}时{{m}}分{{s}}秒</div>
        <p class="notxt tnotxt">距离活动结束</p>
      </div>
      <!--shangjia-->
      <img class="centImg" src="../../assets/images/newimg/z22@2x.png" alt=""/>

      <div class="indexmerchantbox" style="padding-left: 0;height:auto;">
        <div class="swiper-container swiper-containerabc box_siz" style="width: 7rem;border:0.03rem dashed #000;border-radius: 0.5rem; height:auto;padding:0.1rem;">
          <div class="swiper-wrapper" style="height:auto;">
            <div class="swiper-slide" style="margin-right:0.1rem;" v-for="(item,index) in business.business" :key="index">
              <router-link :to="'/Tshop/'+item.businessId+''">
                <img class="marimg" :src="item.businessPic" alt=""/>
                <p class="martxt marttext">{{item.businessName}}</p>
              </router-link>
            </div>

          </div>
        </div>
      </div>
      <!--huodongguize-->
      <div class="whbox"></div>
      <div :class="showTotal?'tactivity_rules':'delte_tactivity_rules'">
        <p class="act_title">活动规则</p>
        <p :class="showTotal?'act_main':'detailed_actmain'">{{homeStr.rule}}</p>
        <img @click="btnauto" class="btmimg" src="../../assets/images/newimg/dbx546@2x.png" alt=""/>
      </div>
      <!---->

      <!--iphone_site-->
      <div class="tborder box_siz" style="height:6.81rem;">
        <div class="swiper-container swiper-container1 swiper-no-swiping">
          <div class="swiper-wrapper swiper-wrapper1">
            <div class="swiper-slide swiper-slide1" v-for="(item,index) in business.mainBusiness" :key="index">
              <div class="iphone_sitebox box_siz">
                <img class="titleimg l" :src="item.mainBusinessPic" alt=""/>
                <div class="maxw l">
                  <p class="iphNumber" style="color:#000;"><img class="dhimg"
                                                                src="../../assets/images/newimg/WechatIMG3596.png"/>
                    {{item.mainBusinessName}}</p>
                  <a :href="'tel:' + item.mainBusinessPhone"><p class="iphNumber" style="color:#000;"><img class="dhimg"
                                                                                                           src="../../assets/images/newimg/dh(2)@2x.png"/>
                    {{item.mainBusinessPhone}}</p></a>
                  <p class="site" style="color:#000;"><img class="dzimg" src="../../assets/images/newimg/dz(1)@2x.png"
                                                           alt=""/> {{item.mainBusinessAddress}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination">
          </div>
        </div>
        <div class="siwperOuterbox" style="width:100%">
          <!--2-->
          <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(str,index) in business.mainBusiness" :key="index"
                   :style="{ backgroundImage: 'url(' + str.mainBusinessVipCardImg + ')' }">
                <router-link :to="'/Tshop/'+str.mainBusinessId+''" style="display: block;
      width: 100%;
      height: 100%;"></router-link>
              </div>
            </div>
            <!--<div class="swiper-pagination">-->
            <!--</div>-->
          </div>
        </div>
      </div>
      <!---->
      <div class="decoratebox">
        <span class="ddd">····</span>
        <img src="../../assets/images/newimg/ty3kb3@2x.png" alt=""/>
        <span class="ddd">····</span>
      </div>
      <!---->
      <div class="footerbor" style="background:none;border:0.03rem dashed #000;">
        <img class="centImg" src="../../assets/images/newimg/WechatIMG3592.png" alt=""/>
        <!---->
        <div class="tfooterbox box_siz">
          <div class="overflowbox">
            <div class="NumListbox box_siz" v-for="(item,index) in moneyAry" :key="index">
              <!--<p class="numbertxt l" style="color:#000">{{index+1}}</p>-->
              <img class="sortImg l" :src="item.userHeadImg" alt=""/>
              <div class="sortpeple l" style="width:43%;">
                <p style="color:#000;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 0.88rem;">{{item.userName}}</p>
                <!--<p style="color:#000">{{item.disNum}}</p>-->
              </div>
              <p class="moneyshow r" style="color: #000;">{{item.disMoney}}元</p>
            </div>
          </div>
        </div>
      </div>
      <!--tijiao-->
      <div class="btmouter_box">
        <div class="tbtn l" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/TInvitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtn r">分享赚钱</div>
        </router-link>
      </div>

      <!--position-->
      <div style="width:1.5rem;height:1.5;position: fixed;left: 0.1rem;bottom: 50%;z-index: 999;">
        <router-link to="/TjoinIn">
          <img src="../../assets/images/newimg/WechatIMG87.png" alt="">
        </router-link>
      </div>
      <ul class="tposibox">
        <li><a :href="'tel:' + homeStr.phone"><img src="../../assets/images/newimg/WechatIMG88.png" alt=""/></a>
        </li>
        <li>
          <router-link :to="'/TmyOrder/'+this.activityId+'/'+this.userOpenId+''">
            <img src="../../assets/images/newimg/WechatIMG89.png" alt=""/>
          </router-link>
        </li>
      </ul>
    </div>
    <!--==============第三版=============-->
    <div class="threebox" v-if="threeouterbox" style="width:7.5rem;">
      <div class="bannerbox">

      </div>
      <div class="positopbox">
        <div class="bullet_screenY" v-for="(item,index) in bulletlista"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem',marginTop:3}" >
          <img class="bulletimg l" :src="item.headImg" alt=""/>
          <p class="l backg" style="font-size:0.27rem;">{{item.msg}}</p>
        </div>
      </div>
      <nav :style="{backgroundImage: 'url(' + homeStr.bannerPic + ')', backgroundSize:'cover'}">
        <div class="bullet_screen" v-for="(item,index) in bulletlist"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem'}" >
          <img class="bulletimg l" :src="item.headImg" alt=""/>
          <p class="l backg" style="font-size:0.27rem;">{{item.msg}}</p>
        </div>
      </nav>
      <div class="jtbox thjtbox box_siz">
        已有{{homeStr.num}}人参与活动
      </div>
      <div class="thcount_down box_siz">
        <div class="showTimebox thshowTimebox">{{d}}天 {{h}}时{{m}}分{{s}}秒</div>
        <p class="notxt thnotxt">距离活动结束</p>
      </div>
      <!---->
      <!--&lt;!&ndash;lianmengshangjia&ndash;&gt;business.business-->
      <img class="thcentImg" src="../../assets/images/newimg/zu53@2x.png" alt=""/>
      <div style="text-align: center;display: flex;flex-direction: row;justify-content: center;">
        <span style="color: rgb(0, 0, 0);" class="indexInfo"><strong>商家排名不分前后</strong></span>
      </div>
      <!--shangjia-->
      <div class="indexmerchantbox box_siz" style="padding-left: 0;height:auto;">
        <div class="swiper-container swiper-containerabc box_siz" style="width: 7rem;background: #fff;border-radius: 0.5rem; height:auto;padding:0.1rem;">
          <div class="swiper-wrapper" style="margin:0 auto;height:auto;">
            <!--<div class="swiper-slide swiper-slide1">-->
        <!--<div class="scrollBox"> marlistbox-->
          <div class="swiper-slide" style="padding-right:0.1rem;" v-for="(item,index) in newArray" :key="index">
            <div v-for="data in item">
            <router-link :to="'/THshop/'+data.businessId+'/'+activityId+''">
              <img class="marimg" :src="data.businessPic" alt=""/>
              <p class="martxt marttext" style="color:#000">{{data.businessName}}</p>
            </router-link>
            </div>
          </div>

          </div>
        </div>
        <!--</div>-->
      </div>
      <!--huodongguize-->
      <p class="thact_title"></p>
      <div :class="showTotal?'thactivity_rules':'delte_thactivity_rules'">
        <!--<p :class="showTotal?'act_main':'detailed_actmain'" v-html="homeStr.rule"></p>-->
        <div :class="showTotal?'act_main':'detailed_actmain'" v-html="homeStr.rule"></div>
        <div style="text-align: center">
        <img @click="btnauto" class="btmimg" src="../../assets/images/newimg/dbx546@2x.png" alt=""/>
        </div>
      </div>
      <!--iphone_site-->
      <!--siwper-->
      <img class="mdxq" src="../../assets/images/newimg/WechatIMG95.png" alt="">
      <div class="siwperOuterbox box_siz">
        <div class="l lbox" style="margin-top:2.1rem"></div>
        <div class="r rbox" style="margin-top:2.1rem"></div>
        <div class="swiper-container swiper-container1 swiper-no-swiping">
          <div class="swiper-wrapper swiper-wrapper1">
            <div class="swiper-slide swiper-slide1" v-for="(item,index) in business.mainBusiness" :key="index">
              <div class="iphone_sitebox box_siz">
                <img class="titleimg l" :src="item.mainBusinessPic" alt=""/>
                <div class="maxw l">
                  <p class="iphNumbers" style="color:#000;"><img class="dhimg"
                                                                 src="../../assets/images/newimg/WechatIMG3596.png"/>
                    {{item.mainBusinessName}}</p>
                  <a :href="'tel:' + item.mainBusinessPhone"><p class="iphNumbers" style="color:#000;"><img
                    class="dhimg"
                    src="../../assets/images/newimg/dh(2)@2x.png"/>
                    {{item.mainBusinessPhone}}</p></a>
                  <p class="sites" style="color:#000;"><img class="dzimg" src="../../assets/images/newimg/dz(1)@2x.png"
                                                            alt=""/> {{item.mainBusinessAddress}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination">
          </div>
        </div>
        <div class="siwperOuterbox" style="width:100%">
          <!--2-->
          <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(str,index) in business.mainBusiness" :key="index"
                   :style="{ backgroundImage: 'url(' + str.mainBusinessVipCardImg + ')' }">
                <router-link :to="'/THshop/'+str.mainBusinessId+'/'+activityId+''" style="display: block;
      width: 100%;
      height: 100%;"></router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div class="decoratebox">
        <img style="width:0.8rem;height:0.8rem;" src="https://image.lanstech.cn/f27066bf-c6b7-403e-8332-ba43c1c06a92.png" alt="">
        <span class="ddd">····</span>
        <img src="../../assets/images/newimg/ty3kb3@2x.png" alt=""/>
        <span class="ddd">····</span>
        <img style="width:0.8rem;height:0.8rem;" src="https://image.lanstech.cn/11bba421-e6b8-4445-8729-7ce6e49b392e.png" alt="">
        <div style="text-align: center;height: 0.8rem;display: flex;flex-direction: row;justify-content: center;">
          <span style="color: rgb(0, 0, 0);" class="indexInfo"><strong>点击查看详情</strong></span>
        </div>
      </div>

      <div class="footerbor">
        <!--<img class="centImg" src="../../assets/images/newimg/WechatIMG3588.png" alt=""/>-->
        <div class="centImg"></div>
        <!--3NumListbox  tfooterbox box_siz-->
        <div class="swiper-container swiper-containervertical box_siz" style="height:5rem;margin-top:1rem;">
          <div class="swiper-wrapper tfooterbox box_siz" style="width:100%;height:auto;padding-top:0;overflow: auto">
            <div class="swiper-slide box_siz" data-swiper-autoplay="850"
                 style="border-radius:0;border-bottom:0.01rem solid #fff;padding-bottom: 0.2rem;" v-for="(item,index) in moneyAry" :key="index">
              <img style="margin-top:0.3rem" class="sortImg l" :src="item.userHeadImg" alt=""/>
              <div class="sortpeplethr l">
                <p style="line-height: 1.2rem;" class="martxtUserName marttext">{{item.userName}}</p>
              </div>
              <p class="moneyshowthr r" style="color: #fff;line-height: 1.2rem;">{{item.disMoney}}元</p>
            </div>
          </div>
        </div>
      </div>
      <!--tijiao-->
      <div class="btmouter_box" v-show="isDisValueTH">
        <router-link :to="'/THmyDisValue/'+this.activityId+'/'+this.userOpenId+''" >
          <div class="thbtnOneTH l"  style="color: #fff;line-height: 0.4rem;padding-top: .1rem" @click="getPhoneNum">
            <span>我的<br>红包</span>
          </div>
        </router-link>
        <div class="thbtnTwo l" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/FInvitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtnDis r">分享赚钱</div>
        </router-link>
      </div>

      <div class="btmouter_box" v-show="disValueTH">
        <div class="thbtn l" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/THInvitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtn r">分享赚钱</div>
        </router-link>
      </div>

      <!--position-->
      <div style="width:1.5rem;height:1.5;position: fixed;left: 0.1rem;bottom: 13%;z-index: 999;">
        <router-link to="/THjoinIn">
          <img src="../../assets/images/newimg/WechatIMG87.png" alt="">
        </router-link>
      </div>
      <ul class="tposibox">

        <li><a :href="'tel:' + homeStr.phone"><img src="../../assets/images/newimg/WechatIMG88.png" alt=""/></a>
        </li>
        <li>
          <router-link :to="'/THmyOrder/'+this.activityId+'/'+this.userOpenId+''">
            <img src="../../assets/images/newimg/WechatIMG89.png" alt=""/>
          </router-link>
        </li>
      </ul>
    </div>
    <!--============第四版============-->
    <div class="threebox" v-if="fourouterbox" style="width:7.5rem;background:#14003D;">
      <div class="bannerbox">

      </div>
      <div class="positopbox">
        <div class="bullet_screenY" v-for="(item,index) in bulletlista"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem',marginTop:3}" >
          <img class="bulletimg l" :src="item.headImg" alt=""/>
          <p class="l backg" style="font-size:0.27rem;">{{item.msg}}</p>
        </div>
      </div>
      <nav class="fourNav" :style="{backgroundImage: 'url(' + homeStr.bannerPic + ')', backgroundSize:'cover'}">
        <div class="bullet_screen" v-for="(item,index) in bulletlist"
             :style="{top:item.top+ 'rem',left:item.left+ 'rem'}" >
          <img class="bulletimg l" :src="item.headImg" alt=""/>
          <p class="l backg" style="font-size:0.27rem;">{{item.msg}}</p>
        </div>
      </nav>
      <div class="jtbox thjtbox box_siz" style="background: none;width:5.5rem;border-radius: 0.6rem;border:2px solid rgb(154, 135, 191);line-height: 0.8rem;padding:0;">
        已有{{homeStr.num}}人参与活动
      </div>
      <div class="thcount_down fcount_down box_siz">
        <div class="showTimebox thshowTimebox" style="color:#fff;">{{d}}天 {{h}}时{{m}}分{{s}}秒</div>
        <p class="notxt thnotxt" style="color:#fff;">距离活动结束</p>
      </div>
      <!---->
      <!--&lt;!&ndash;lianmengshangjia&ndash;&gt;business.business-->
      <img class="thcentImg" style="width:3.67rem;height:0.6rem;margin-top:0.9rem;" src="../../assets/images/Fourimg/flmsj9@2x.png" alt=""/>
      <div style="text-align: center;display: flex;flex-direction: row;justify-content: center;">
        <span class="indexInfo"><strong>商家排名不分前后</strong></span>
      </div>
      <!--shangjia-->
      <div class="indexmerchantbox box_siz" style="padding-left: 0;height:auto;">
        <div class="swiper-container swiper-containerabc box_siz" style="width: 7rem;background:#14003D;border:2px solid rgb(154, 135, 191);border-radius: 0.5rem; height:auto;padding:0.1rem;">
          <div class="swiper-wrapper" style="margin:0 auto;height:auto;">
            <!--<div class="swiper-slide swiper-slide1">-->
            <!--<div class="scrollBox"> marlistbox-->
            <div class="swiper-slide" style="padding-right:0.1rem;" v-for="(item,index) in newArray" :key="index">
              <div v-for="data in item">
                <router-link :to="'/Fshop/'+data.businessId+'/'+activityId+''">
                  <img class="marimg" :src="data.businessPic" alt=""/>
                  <p class="martxt marttext" style="color:#fff;">{{data.businessName}}</p>
                </router-link>
              </div>
            </div>

          </div>
        </div>
        <!--</div>-->
      </div>
      <!--huodongguize-->
      <p class="fact_title"></p>
      <div :class="showTotal?'factivity_rules':'delte_factivity_rules'">
        <!--<p :class="showTotal?'act_main':'detailed_actmain'" v-html="homeStr.rule"></p>-->
        <div :class="showTotal?'act_main':'detailed_actmain'" v-html="homeStr.rule"></div>
        <div style="text-align: center">
          <img @click="btnauto" class="btmimg" src="../../assets/images/newimg/dbx546@2x.png" alt=""/>
        </div>
      </div>
      <!--iphone_site-->
      <!--siwper-->
      <img class="mdxq" src="../../assets/images/Fourimg/fmdxq.png" alt="">
      <div class="siwperOuterbox box_siz">
        <div class="l lbox" style="margin-top:2.1rem"></div>
        <div class="r rbox" style="margin-top:2.1rem"></div>
        <div class="swiper-container swiper-container1 swiper-no-swiping">
          <div class="swiper-wrapper swiper-wrapper1">
            <div class="swiper-slide swiper-slide1" v-for="(item,index) in business.mainBusiness" :key="index">
              <div class="iphone_sitebox box_siz">
                <img class="titleimg l" :src="item.mainBusinessPic" alt=""/>
                <div class="maxw l">
                  <p class="iphNumbers" style="color:#fff;"><img class="dhimg"
                                                                 src="../../assets/images/Fourimg/fshmc@2x.png"/>
                    {{item.mainBusinessName}}</p>
                  <a :href="'tel:' + item.mainBusinessPhone"><p class="iphNumbers" style="color:#fff;"><img
                    class="dhimg"
                    src="../../assets/images/Fourimg/fdh(2)@2x.png"/>
                    {{item.mainBusinessPhone}}</p></a>
                  <p class="sites" style="color:#fff;"><img class="dzimg" src="../../assets/images/Fourimg/fdz(1)@2x.png"
                                                            alt=""/> {{item.mainBusinessAddress}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination">
          </div>
        </div>
        <div class="siwperOuterbox" style="width:100%">
          <!--2-->
          <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(str,index) in business.mainBusiness" :key="index"
                   :style="{ backgroundImage: 'url(' + str.mainBusinessVipCardImg + ')' }">
                <router-link :to="'/Fshop/'+str.mainBusinessId+'/'+activityId+''" style="display: block;
      width: 100%;
      height: 100%;"></router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div class="decoratebox">
        <div>
          <img style="width:0.8rem;height:0.8rem;" src="../../assets/images/newimg/leftwhite.png" alt="">
          <span class="ddd" style="color:#fff;">····</span>
          <img src="../../assets/images/Fourimg/fyxjx749kb@2x.png" alt=""/>
          <span class="ddd" style="color:#fff;">····</span>
          <img style="width:0.8rem;height:0.8rem;" src="../../assets/images/newimg/rightwhite.png" alt="">
        </div>
        <div style="text-align: center;height: 0.8rem;display: flex;flex-direction: row;justify-content: center;">
          <span class="indexInfo"><strong>点击查看详情</strong></span>
        </div>
      </div>

      <div class="ffooterbor">
        <!--<img class="centImg" src="../../assets/images/newimg/WechatIMG3588.png" alt=""/>-->
        <div class="centImg"></div>
        <!--3NumListbox  tfooterbox box_siz-->
        <div class="swiper-container swiper-containervertical box_siz" style="height:6rem;margin-top:2rem;">
          <div class="swiper-wrapper tfooterbox box_siz" style="width:100%;height:auto;padding-top:0;overflow: auto">
            <div class="swiper-slide box_siz" data-swiper-autoplay="850"
                 style="border-radius:0;border-bottom:0.01rem solid #fff;padding-bottom: 0.2rem;" v-for="(item,index) in moneyAry" :key="index">
              <img style="margin-top:0.3rem" class="sortImg l" :src="item.userHeadImg" alt=""/>
              <div class="sortpeplethr l">
                <p style="line-height: 1.2rem;" class="martxtUserName marttext">{{item.userName}}</p>
              </div>
              <p class="moneyshowthr r" style="color: #fff;line-height: 1.2rem;">{{item.disMoney}}元</p>
            </div>
          </div>
        </div>
      </div>
      <!--tijiao-->
      <div class="btmouter_box" v-show="isDisValue">
        <router-link :to="'/FmyDisValue/'+this.activityId+'/'+this.userOpenId+''" >
          <div class="thbtnOne l" style="rgb(244, 116, 139);color: #fff;line-height: 0.4rem;padding-top: .1rem" @click="getPhoneNum">
            <span>我的<br>红包</span>
          </div>
        </router-link>
        <div class="thbtnTwo l" style="background:#e58fb4;" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/FInvitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtnDis r" style="background:#7a76c3;">分享赚钱</div>
        </router-link>
      </div>

      <div class="btmouter_box" v-show="disValue">
        <div class="thbtn l" style="background:#e58fb4;" @click="getPhoneNum">立即抢购</div>
        <router-link :to="'/FInvitation/'+this.activityId+'/'+this.userOpenId+''">
          <div class="invitationbtn r" style="background:#7a76c3;">分享赚钱</div>
        </router-link>
      </div>

      <!--position-->
      <div style="width:1.5rem;height:1.5rem;position: fixed;left: 0.1rem;bottom: 13%;z-index: 999;">
        <router-link to="/FjoinIn">
          <img src="../../assets/images/Fourimg/fqd3@2x.png" alt="">
        </router-link>
      </div>
      <ul class="tposibox">

        <li><a :href="'tel:' + homeStr.phone"><img src="../../assets/images/Fourimg/fiphne11@2x.png" alt=""/></a>
        </li>
        <li>
          <router-link :to="'/FmyOrder/'+this.activityId+'/'+this.userOpenId+''">
            <img src="../../assets/images/Fourimg/fquan12@2x.png" alt=""/>
          </router-link>
        </li>
      </ul>
    </div>
    <!--输入手机号-->
    <div id="opens_windows" v-show="popinp">
      <div class="xdelete" @click="Deletex">x</div>
      <div style="clear:both;text-align:center">
        <input class="postPhoneinp" type="text" placeholder="请输入姓名" v-model="postUserName" style="width:100%">
        <input class="postPhoneinp" type="number" placeholder="请输入电话号码" v-model="postPhone" style="width:100%">
      </div>
      <div @click="Immediate" class="goBuying" id="goBuying">开始抢购</div>

    </div>
    <audio style="display:none" id="bg-music" :src="homeStr.bgm" loop="loop"
           controls></audio>
    <img @click="play" :src="playSrc"  id="audioPLay" alt="" style="position: fixed;bottom: 0;">
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import '../../assets/swiper.min.css'
  import {DatetimePicker, Toast} from 'mint-ui'
  // import {baipin} from '/vue.config.js'

  export default {
    name: 'H5index',
    // components: {
    //   swiper,
    //   swiperSlide
    // },
    data () {
      return {
        shareData: {},
        msg: '',
        bulletlist: [],
        bulletlista:[],
        listImg: [{
          url: require('../../assets/images/newimg/z11@2x.png')
        }],
        homeStr: {},
        d: '',
        h: '',
        m: '',
        s: '',
        CountDown: '',
        business: [],
        moneyAry: [],
        activityId: '',
        userOpenId: '',
        inviteUserOpenId: '',
        oneoterbox: false,
        twoouterbox: false,
        threeouterbox: false,
        fourouterbox: false,
        popWindow: false,
        popinp: false,
        postPhone: '',
        postUserName: '',
        // 是否展示所有文本内容
        showTotal: true,
        // // 显示展开还是收起
        // exchangeButton: true,
        // 是否显示展开收起按钮
        showExchangeButton: false,

        isDisValue: false,
        disValue: true,

        isDisValueTH: false,
        disValueTH: true,

        playSrc:require('../../assets/images/newimg/music_icon.png'),
        newArray:[]
      }
    },
    methods: {

      changeList () {
        this.$nextTick(() => {
          this.$refs.scroller.reset({
            width: this.item.length*200 + 'px'
          })
        })
      },

      btnauto(){
        // if(this.brandFold == false){
        //   this.$refs.btmimg.style.height = 'auto'
        //   this.$refs.thactivity.style.height = 'auto'
        //   // this.brandFold == true
        // }
        //   this.$refs.btmimg.style.height = '5rem'
        //   this.$refs.thactivity.style.height = '5rem'
        // showTotalIntro () {
          console.log(this.showTotal);
          this.showTotal = !this.showTotal;
          this.exchangeButton = !this.exchangeButton;


      },
      setdata () {
        let num = Math.random() * 10;
        let top = Math.floor(num);
        let left = Math.ceil(num);
        let obj = [
          {
            msg: '恭喜杜升蔚获得100元',
            top: 2,
            left: 0,
            headImg:'https://image.lanstech.cn/bc765ac6-6d96-4ce8-9af6-2b5cbb88c219.jpg'
          },
          {
            msg: '恭喜李静获得100元',
            top: 4,
            left: 10,
            headImg:'https://image.lanstech.cn/e3751731-2899-4a63-bc63-027438225c30.jpg'
          }
          // ,
          // {
          //   msg: '恭喜赵伟豪购买成功',
          //   top: 6,
          //   left: left - 5,
          //   headImg:require('../../assets/images/headImg/5.jpg')
          // },
          // {
          //   msg: '恭喜田昕雨购买成功',
          //   top: 8,
          //   left: left - 2,
          //   headImg:require('../../assets/images/headImg/6.jpg')
          // },
          // {
          //   msg: '恭喜廖嘉旺购买成功',
          //   top: 3,
          //   left: left - 2.5,
          //   headImg:require('../../assets/images/headImg/7.jpg')
          // },
          // {
          //   msg: '恭喜万紫晨购买成功',
          //   top: 7,
          //   left: left - 3,
          //   headImg:require('../../assets/images/headImg/8.jpg')
          // },          {
          //   msg: '恭喜齐天宇购买成功',
          //   top: 5,
          //   left: left - 5.5,
          //   headImg:require('../../assets/images/headImg/9.jpg')
          // }
          // ,{
          //   msg: '恭喜赵伟豪购买成功',
          //   top: 7,
          //   left: left - 4,
          //   headImg:require('../../assets/images/headImg/10.jpg')
          // },          {
          //   msg: '恭喜赵伟豪购买成功',
          //   top: 6.5,
          //   left: left - 4.5,
          //   headImg:require('../../assets/images/headImg/11.jpg')
          // }
        ];
        let obja = [{
          msg: '恭喜刘威购买成功',
          top: 0,
          left: 0.1,
          headImg:'https://image.lanstech.cn/679e0205-1d63-4656-a354-ec89200331ba.jpg'
        },
          {
            msg: '恭喜牛倩倩购买成功',
            top: 1.5,
            left: 0.1,
            headImg:'https://image.lanstech.cn/bf56a7df-b05e-4879-957a-a41da597ca8a.jpg'
          },
          {
            msg: '恭喜于鹏飞购买成功',
            top: 3,
            left: 0.1,
            headImg:'https://image.lanstech.cn/d4d3ccd8-d7a7-4cdf-9add-9af6809fd872.jpg'
          }
        ];

        this.bulletlist = obj;
        this.bulletlista = obja;

        console.log("--------")
        console.log(this.bulletlist)
        console.log(this.bulletlista)

        var that = this
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/danmu?activityId=' + that.activityId,
          data: {}
        }).then(function (res) {
          if (res.status === 200) {
            console.log("========___")
            console.log(res.data.top)
            console.log(res.data.left)
            if(res.data.top){
              that.bulletlist = res.data.top
            }
            if(res.data.left){
              that.bulletlista = res.data.left
            }
            console.log(that.bulletlist)
            console.log(that.bulletlista)
          }
        })

      },

      // 分享接口
      share () {
        var that = this
        this.$http({
          method: 'post',
          url: 'http://api.wangjianxin.top/wx/queryWxConfig',
          data: {}
        }).then(function (res) {

          that.shareData = res
        })
      },
      businessInfo () {
        var that = this
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/getBusiness?activityId=' + that.activityId,
          data: {}
        }).then(function (res) {
          console.log(res.data)
          if (res.status === 200) {
            that.business = res.data
            let index = parseInt(that.business.business.length / 2)
            console.log(index)
            let arr1 = that.business.business.slice(0,index+1)
            let arr2 = that.business.business.slice(index+1)
            //
            let array=[]
            for(let i=0;i<arr1.length;i++){
              if(typeof(arr2[i])!='undefined'){
                array.push(
                 [arr1[i],arr2[i]]
                )
              }else{
                array.push(
                  [arr1[i],arr2[i]||'']
                )
              }
              that.newArray = array
              console.log(that.newArray)
            }
            console.log(that.business)
            var swiper1 = new Swiper('.swiper-container1', {
              // pagination: {
              //   el: '.swiper-pagination',
              // },
              // paginationClickable: true,
              // loop: true,
              // speed: 600,
              // autoplay: 4000,
              // onTouchEnd: function () {
              //   swiper.startAutoplay()
              // },
              controller: {
                control: [swiper1, swiper2],
              },
              observer: true,
              observeParents: true,
            })

            var swiper2 = new Swiper('.swiper-container2', {
              // pagination: {
              //   el: '.swiper-pagination',
              // },
              paginationClickable: true,
              loop: true,
              speed: 600,
              autoplay: 4000,
              onTouchEnd: function () {
                swiper.startAutoplay()
              },
              controller: {
                control: [swiper1, swiper2],
              },
              observer: true,
              observeParents: true,
            })
            var mySwiper = new Swiper('.swiper-containerabc',{
              width:70,
              paginationClickable: true,
              loop: true,
              speed: 600,
              autoplay: 4000,
              centeredSlides: false,
              onTouchEnd: function () {
                swiper.startAutoplay()
              },
              observer: true,
              observeParents: true,
                // slidesPerView: 6,//一行显示jige
                // slidesPerColumn: 2,//显示jihang
                // slidesPerColumnFill : 'row',
            })

          }
        })
      },
      // 有钱一起赚
      money () {
        var that = this
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/getActivityDisMoneyList?activityId=' + that.activityId,
          data: {}
        }).then(function (res) {
          if (res.status === 200) {
            that.moneyAry = res.data
            var swiper4 = new Swiper('.swiper-containervertical', {
              height:70,
              autoplay:{
                delay: 1000,    // 自动播放间隔，单位ms
                disableOnInteraction: false, // 值为false表示用户操作swiper之后，不会停止播放，值true停止
              },
              // speed: 200,
              // stopOnLastSlide:false,
              // autoplayDisableOnInteraction : false,
              // loop:false,
              direction : 'vertical',
              // onTouchEnd: function () {
              //   swiper.startAutoplay()
              // },
              observer: true,
              observeParents: true,
              spaceBetween: 0
            })
          }
        })
      },
      homeData () {
        var that = this
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/getIndex?activityId=' + that.activityId +'&userOpenId='+that.userOpenId,
          data: {}
        }).then(function (res) {
          console.log(res)

          if (res.status === 200) {
            console.log(res.data.theme == 1)


            that.busPhone == res.data.phone

            if (res.data.theme == 1) {
              that.oneoterbox = true
              that.twoouterbox = false
              that.threeouterbox = false
              that.fourouterbox = false
              that.homeStr = res.data
              that.CountDown = res.data.endTime - new Date().getTime()
              var date = setInterval(() => {
                that.CountDown = that.CountDown - 1000
                var second = that.CountDown / 1000
                that.d = parseInt(second / 3600 / 24)
                that.h = parseInt(second / 3600 % 24) // 小时
                that.m = parseInt(second / 60 % 60)
                that.s = parseInt(second % 60)
              }, 1000)
              if (that.CountDown < 0) {
                clearInterval(date)
                that.d = '00'
                that.h = '00'
                that.m = '00'
                that.s = '00'
              } else {
                console.log(that.d)
              }
            } else if (res.data.theme == 2) {
              that.oneoterbox = false
              that.twoouterbox = true
              that.threeouterbox = false
              that.fourouterbox = false
              that.homeStr = res.data
              that.CountDown = res.data.endTime - new Date().getTime()
              var date = setInterval(() => {
                that.CountDown = that.CountDown - 1000
                var second = that.CountDown / 1000
                that.d = parseInt(second / 3600 / 24)
                that.h = parseInt(second / 3600 % 24) // 小时
                that.m = parseInt(second / 60 % 60)
                that.s = parseInt(second % 60)
              }, 1000)
              if (that.CountDown < 0) {
                clearInterval(date)
                that.d = '00'
                that.h = '00'
                that.m = '00'
                that.s = '00'
              } else {
                console.log(that.d)
              }
            } else if (res.data.theme == 3) {
              that.oneoterbox = false
              that.twoouterbox = false
              that.threeouterbox = true
              that.fourouterbox = false
              that.homeStr = res.data
              that.CountDown = res.data.endTime - new Date().getTime()
              var date = setInterval(() => {
                that.CountDown = that.CountDown - 1000
                var second = that.CountDown / 1000
                that.d = parseInt(second / 3600 / 24)
                that.h = parseInt(second / 3600 % 24) // 小时
                that.m = parseInt(second / 60 % 60)
                that.s = parseInt(second % 60)
              }, 1000)
              if (that.CountDown < 0) {
                clearInterval(date)
                that.d = '00'
                that.h = '00'
                that.m = '00'
                that.s = '00'
              } else {
                console.log(that.d)
              }

              if(res.data.isBuyActivity === 1){
                that.disValueTH = false;
                that.isDisValueTH = true;
              }

            }
            //第四个主题，次数的判断中代码重复太多
            else if(res.data.theme == 4){
              that.oneoterbox = false
              that.twoouterbox = false
              that.threeouterbox = false
              that.fourouterbox = true
              that.homeStr = res.data
              that.CountDown = res.data.endTime - new Date().getTime()
              var date = setInterval(() => {
                that.CountDown = that.CountDown - 1000
                var second = that.CountDown / 1000
                that.d = parseInt(second / 3600 / 24)
                that.h = parseInt(second / 3600 % 24) // 小时
                that.m = parseInt(second / 60 % 60)
                that.s = parseInt(second % 60)
              }, 1000)
              if (that.CountDown < 0) {
                clearInterval(date)
                that.d = '00'
                that.h = '00'
                that.m = '00'
                that.s = '00'
              } else {
                console.log(that.d)
              }
              //修改立即抢购的颜色
              document.getElementById("goBuying").style.background = "rgb(229, 143, 180)";

              if(res.data.isBuyActivity === 1){
                that.disValue = false;
                that.isDisValue = true;
              }
            }

            localStorage.setItem('title', res.data.title)
          }
        })
      },

      // 跳转页面
      myOrder1 (businessId) {
        this.$router.push('shop/' + businessId)
      },
      Invitation () {
        this.$router.push('Invitation/' + this.activityId + '/' + this.userOpenId)
      },
      getPhoneNum () {
        this.popinp = true
      },
      Deletex () {
        this.popinp = false
      },
      // 立即抢购
      Immediate () {
        let reg = new RegExp(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/)
        console.log(reg.test(this.postPhone))
        if (!reg.test(this.postPhone)) {
          // Toast({
          //   message: '手机号格式有误',
          //   duration: '2000'
          // });
          alert('手机号格式有误')
          return
        }
        if (this.postUserName == '') {
          alert('请输入姓名')
          return
        }
        this.popinp = false
        var that = this
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/wx/pay?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId + '&phone=' + that.postPhone + '&username=' + that.postUserName
        }).then(function (res) {
          //请求成功
          if (res.status === 200) {
            //后台支付成功
            if (res.data.success) {
              wx.chooseWXPay({
                timestamp: res.data.data.timeStamp,
                nonceStr: res.data.data.nonceStr,
                package: res.data.data.package,
                signType: 'MD5',
                paySign: res.data.data.paySign,
                success: function (res) {
                  // 弹出入群二维码
                  if (res.errMsg == 'chooseWXPay:ok') {
                    // 支付成功
                    alert('支付成功')

                    that.popWindow = true
                  } else {
                    alert(res.errMsg)
                  }

                  // $window.location.reload()
                },
                cancel: function (res) {
                  // 支付取消
                  alert('支付取消')
                }
              })
            } else {
              alert(res.data.errorMessage)
            }

          } else {
            alert(res.data.errorMessage)
          }
        })
      },
      closeWind () {
        this.popWindow = false
      },
      // play(){
      //   let audio = document.getElementById('bg-music')
      //   audio.play()
      // },
      play(){
        let myAudio = document.getElementById('bg-music')
        if(myAudio.paused){
          myAudio.play();
          //播放按钮
          this.playSrc=require('../../assets/images/newimg/music_icon.png');
        }else{
          myAudio.pause();
          //暂停按钮
          this.playSrc=require('../../assets/images/newimg/playout.png');
        }
      }
    },

    mounted () {
      // setTimeout(function(){
        let audioPLay = document.getElementById('audioPLay')
        audioPLay.click()
      // },2000)

      this.activityId = this.$route.params.activityId
      this.userOpenId = this.$route.params.userOpenId
      this.inviteUserOpenId = this.$route.params.inviteUserOpenId
      var that = this
      this.money()
      this.setdata()
      this.homeData()
      this.businessInfo()
      // document.addEventListener('WeixinJSBridgeReady',that.play,false)
      //请求接口
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getShareInfo?activityId=' + that.activityId +'&userOpenId='+that.userOpenId
      }).then(function (res) {
        if (res.status === 200) {
          that.shareTitle = res.data.shareTitle
          that.shareContent = res.data.shareContent
          that.sharePic = res.data.sharePic

          console.log('++++++++')
          // console.log(res)
          // console.log(res.data.shareTitle)
          // console.log(res.data.shareContent)
          console.log(that.sharePic)

        } else {
          alert(res.data.errorMessage)
        }
      })

      // 分享接口调用
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/wx/queryWxConfig?activityId=' + that.activityId + '&wxOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId+'&type=index'
      }).then(function (res) {
        if (res.status === 200) {
          console.log(res.data.appid)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appid, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
        } else {
          alert(res.data.errorMessage)
        }
      })

      // 分享好友
      wx.ready(function () {
        //播放音屏
        document.getElementById('bg-music').play();

        wx.onMenuShareAppMessage({
          title: that.shareTitle, // 分享标题
          desc: that.shareContent, // 分享描述
          link: 'http://h5.wangjianxin.top/ShareInterim/' + that.activityId + '/' + that.userOpenId, // 分享链接，该链接域名必须与当前企业的可信域名一致
          imgUrl: that.sharePic, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
            // alert('click shared');
          },
          success: function (res) {
            /***
             * 设计到员工的被转发
             */
            this.$http({
              method: 'get',
              url: 'http://api.wangjianxin.top/wx/wxBusinessUserTongji/share?activityId=' + that.activityId +'&userOpenId='+that.userOpenId+'&inviteOpenId='+that.inviteUserOpenId
            }).then(function (res) {
              if (res.status === 200) {
                console.log(res.data)
              }
            })
          },
          cancel: function (res) {
            // alert('shared cancle');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        }),
          wx.onMenuShareTimeline({
            title: that.shareTitle, // 分享标题
            link: 'http://h5.wangjianxin.top/ShareInterim/' + that.activityId + '/' + that.userOpenId, // 分享链接，该链接域名必须与当前企业的可信域名一致
            imgUrl: that.sharePic, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

              /***
               * 设计到员工的被转发
               */
              this.$http({
                method: 'get',
                url: 'http://api.wangjianxin.top/wx/wxBusinessUserTongji/share?activityId=' + that.activityId +'&userOpenId='+that.userOpenId+'&inviteOpenId='+that.inviteUserOpenId
              }).then(function (res) {
                if (res.status === 200) {
                  console.log(res.data)
                }
              })
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }

          })
      })

      // document.getElementById('bg-music').play()
    },
    created(){
      // baipin();
    }
  }


</script>

<style scoped>
  .indexbox {
    width: 7.5rem;
    height: 100%;
  }

  .threebox {
    background: #FFC500;
  }

  .backimg {
    width: 7.5rem;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -99;
  }

  nav {
    width: 6.84rem;
    height: 10.18rem;
    margin: 0 auto;
    background: url(../../assets/images/newimg/z125@2x.png) no-repeat center;
    background-size: cover;
    overflow: hidden;
    position: relative;
  }
  .fourNav{
    border-radius:0.6rem;
  }
  .jtbox {
    width: 7.5rem;
    overflow: hidden;
    text-align: center;
    font-size: 0.33rem;
    font-family: FZLTZHUNHK--GBK1-0;
    font-weight: normal;
    color: rgba(210, 157, 43, 1);
    margin: 0.15rem auto 0.14rem;
  }

  .tjtbox {
    font-size: 0.30rem;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }

  .thjtbox {
    height: 0.8rem;
    background: url(../../assets/images/newimg/zu5@2x.png) no-repeat left;
    background-size: 8rem 100%;
    font-size: 0.3rem;
    padding-top: 0.3rem;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-shadow: 3px 3px 3px rgba(13, 44, 58, 0.63);
    margin: 0.15rem auto 0.23rem;
  }
  /*top*/
  .positopbox{
    width:7.5rem;
    height:0.8rem;
    box-sizing: border-box;
    position: absolute;
    overflow:hidden;
    top:0;
    left:0;
    z-index:99999;
    background:rgba(0, 0, 0,0.5);

    position: fixed;
    bottom: 0;

  }


  /*count_down*/

  .count_down {
    width: 6.83rem;
    height: 1.98rem;
    margin: 0 auto;
    background: url(../../assets/images/newimg/z121@2x.png) no-repeat center;
    background-size: 100% 100%;
    margin-bottom: 0.18rem;
  }

  .tcount_down {
    width: 5.89rem;
    height: 1.36rem;
    background-size: 100% 100%;
    background: url(../../assets/images/newimg/jx1kb@2x.png) no-repeat center;
  }

  .thcount_down {
    width: 7.25rem;
    height: 1.21rem;
    background: url(../../assets/images/newimg/zu54@2x.png) no-repeat center;
    background-size: cover;
    margin: 0 auto;
    margin-bottom: 0.18rem;
    color: rgba(0, 0, 0, 1);
  }

  .fcount_down{
    background:url("../../assets/images/Fourimg/f14@2x.png") no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .showTimebox {
    font-size: 0.4rem;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(244, 192, 142, 1);
    text-align: center;
    padding-top: 0.45rem;
  }

  .tshowTimebox {
    padding-top: 0.2rem;
    font-family: SourceHanSansCN-Normal;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .thshowTimebox {
    padding-top: 0.2rem;
    font-family: SourceHanSansCN-Normal;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  .showTimebox span {
    font-size: 0.24rem;
    margin: 0 0.11rem 0;
  }

  .dot {
    width: 5.49rem;
    overflow: hidden;
    height: 0.1rem;
    line-height: 0.1rem;
    margin: 0 auto;
    font-size: 0.4rem;
    color: rgba(244, 192, 142, 1);
    text-align: center;
  }

  .notxt {
    font-size: 0.24rem;
    font-family: SourceHanSansCN-Normal;
    font-weight: 400;
    color: rgba(244, 192, 142, 1);
    text-align: center;
  }

  .tnotxt {
    color: rgba(255, 255, 255, 1);
  }

  .thnotxt {
    color: rgba(0, 0, 0, 1);
  }

  .whbox {
    width: 100%;
    height: 0.89rem;
  }

  /*huodongguize*/

  .activity_rules {
    width: 6.83rem;
    height: 3.45rem;
    background: url(../../assets/images/newimg/z122@2x.png) no-repeat center;
    background-size: 100% 100%;
    margin: 0 auto 0.24rem;
    padding-top: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(244, 192, 142, 1);
  }

  .delte_activity_rules {
    width: 6.83rem;
    height: auto;
    background: url(../../assets/images/newimg/z122@2x.png) no-repeat center;
    background-size: 100% 100%;
    margin: 0 auto 0.24rem;
    padding-top: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(244, 192, 142, 1);
  }
  .tactivity_rules {
    width: 6.76rem;
    height: 2.97rem;
    margin: 0 auto 0.24rem;
    border: 1px dashed rgba(101, 101, 101, 1);
    box-shadow: 0px 0px 47px 10px rgba(228, 228, 228, 0.67);
    padding-top: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(10, 2, 5, 1);
  }
  .delte_tactivity_rules{
    width: 6.76rem;
    height: auto;
    margin: 0 auto 0.24rem;
    border: 1px dashed rgba(101, 101, 101, 1);
    box-shadow: 0px 0px 47px 10px rgba(228, 228, 228, 0.67);
    padding-top: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(10, 2, 5, 1);
  }
  .thactivity_rules {
    width: 6.81rem;
    height: 2.84rem;
    margin: 0 auto 0.24rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.60rem;
    border: 1px dashed rgba(101, 101, 101, 1);
    padding-top: 0.4rem;
    /*text-align: center;*/
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(10, 2, 5, 1);
  }

  .delte_thactivity_rules{
    width: 6.81rem;
    height: auto;
    margin: 0 auto 0.24rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.60rem;
    border: 1px dashed rgba(101, 101, 101, 1);
    padding-top: 0.4rem;
    /*text-align: center;*/
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(10, 2, 5, 1);
  }
  .factivity_rules {
    width: 6.81rem;
    height: 2.84rem;
    margin: 0 auto 0.24rem;
    background:#14003D;
    border:2px solid rgb(154, 135, 191);
    border-radius: 0.60rem;
    padding-top: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: #fff;
  }

  .delte_factivity_rules{
    width: 6.81rem;
    height: auto;
    margin: 0 auto 0.24rem;
    background:#14003D;
    border:2px solid rgb(154, 135, 191);
    border-radius: 0.60rem;
    padding-top: 0.4rem;
    /*text-align: center;*/
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color:#fff;
  }
  .act_title {
    font-size: 0.32rem;
    margin-bottom: 0.25rem;
  }

  .thact_title {
    width: 4.08rem;
    height: 1.34rem;
    background: url(../../assets/images/newimg/zu51@2x.png) no-repeat center;
    background-size: cover;
    margin: 0.5rem auto 0.39rem;
  }
  .fact_title{
    width: 4.08rem;
    height: 1.34rem;
    background: url(../../assets/images/Fourimg/fhdgz10@2x.png) no-repeat center;
    background-size: 100%;
    margin: 0.5rem auto 0.39rem;

  }
  .mdxq{
    width:4.08rem;
    display: block;
    margin:0.5rem auto;

  }
  .act_main {
    width: 5.27rem;
    height: 1.75rem;
    margin: 0 auto;
    line-height: 0.45rem;
    overflow: hidden;
  }
  .detailed_actmain{
    width: 5.27rem;
    height: auto;
    margin: 0 auto;
    line-height: 0.45rem;
    overflow: hidden;
  }


  .btmimg {
    width: 0.35rem;
    height: 0.30rem;
    margin-top: 0.7rem;
  }

  /*img*/

  .centImg {
    width: 3.52rem;
    height: 0.59rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.27rem;
  }

  .thcentImg {
    width: 4.6rem;
    height: 1.63rem;
    display: block;
    margin: 0 auto;
    /*margin-bottom: 0.27rem;*/
  }

  /*shangjia*/

  .indexmerchantbox {
    width: 7.5rem;
    height: 3.3rem;
    margin-top: 0.5rem;
    padding-left: 0.39rem;
    margin-bottom: 0.26rem;
  }

  .scrollBox {
    width: 100%;
    height: 3.3rem;
    /*overflow: hidden;*/
    /*margin-top: 200px;*/
    /*display: -webkit-box;*/
    /*overflow-x: scroll;*/
    -webkit-overflow-scrolling: touch;
  }

  .marlistbox {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .marimg {
    width: 0.96rem;
    height: 0.96rem;
    display: block;
    margin-bottom: 0.16rem;
    border-radius:50px
  }
  img:before{
    width:100%;
    height:100%;
  }
  .martxt {
    width: 1rem;
    font-size: 0.22rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(243, 184, 121, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .martxtUserName {
    width: 1.1rem;
    font-size: 0.22rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(243, 184, 121, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marttext {
    color: #fff;
    line-height:0.88rem;
  }

  /*iphone_site*/

  .tborder {
    width: 7.09rem;
    height: 5.81rem;
    background: rgba(255, 255, 255, 1);
    border: 0.06rem dashed rgba(33, 33, 33, 1);
    margin: 0 auto;
    padding-top: 0.3rem;
    box-shadow: 0px 20px 29px 0px rgba(184, 184, 184, 0.6);
  }

  .iphone_sitebox {
    width: 100%;
    height: 1.8rem;
    /*padding-left: 0.52rem;*/
    font-size: 0.24rem;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 0.3rem;
  }

  .maxw {
    width: 70%;
    margin-top: 0.4rem;
  }

  .iphNumbers {
    font-size: 0.26rem;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(73, 73, 73, 1);
  }

  .dhimg {
    width: 0.19rem;
    height: 0.18rem;
  }

  .dzimg {
    width: 0.15rem;
    height: 0.18rem;
  }

  .sites {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.26rem;
    color: rgba(73, 73, 73, 1);
  }

  .titleimg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    margin-top: 0.2rem;
    border:0.06rem solid #fc845d;
  }

  .site {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }

  /*siwper*/

  .siwperOuterbox {
    width: 7.5rem;
    height: 6rem;
  }

  .scrollImgbox {
    width: 6.5rem;
    height: 3.78rem;
    margin: 0 auto;
  }

  .lbox {
    width: 0.24rem;
    height: 3.51rem;
    background: rgba(252, 236, 214, 1);
    opacity: 0.5;
    border-radius: 0 0.20rem 0.2rem 0;
    margin-top: 0.1rem;
  }

  .rbox {
    width: 0.24rem;
    height: 3.51rem;
    background: rgba(252, 236, 214, 1);
    opacity: 0.5;
    border-radius: 0.20rem 0 0 0.2rem;
    margin-top: 0.1rem;
  }

  .scrollImgbox img {
    width: 100%;
    height: 100%;
  }

  /*decoratebox*/

  .decoratebox {
    width: 70%;
    margin: 0 auto;
    font-size: 0.7rem;
    text-align: center;
    color: #fff;
  }

  .ddd {
    color: rgba(2, 2, 2, 1);
  }

  .decoratebox img {
    width: 0.3rem;
    height: 0.3rem;
  }

  .footerbor {
    width: 6.83rem;
    height: 7.32rem;
    /*border: 1px dashed rgba(131, 131, 131, 1);*/
    margin: 0 auto 0.7rem;
    background: url("../../assets/images/newimg/WechatIMG30.png") no-repeat center;
    background-size: 100%;
    padding-top: 0.39rem;
  }
  .ffooterbor{
    width: 6.83rem;
    height: 9.32rem;
    /*border: 1px dashed rgba(131, 131, 131, 1);*/
    margin: 0 auto 0.9rem;
    background: url("../../assets/images/Fourimg/ffooter7@2x.png") no-repeat center;
    background-size: 100%;
    padding-top: 0.39rem;
  }
  /*footer*/

  .footerbox {
    /* width: 6.83rem;
    height: 7.09rem;
    margin: 0 auto 0.45rem;
    background: url(../../assets/images/newimg/z125@2x.png) no-repeat center;
    padding: 0.68rem 0.74rem 0 0.58rem; */
    overflow: hidden;
    /*overflow: auto;*/
    width: 6.83rem;
    height: 7.09rem;
    margin: 0 auto 0.45rem;
    background: url(../../assets/images/newimg/z125@2x.png) no-repeat center;
    background-size: 100% 100%;
    padding: 0.68rem 0.4rem 0.4rem 0.58rem;
  }

  .overflowbox {
    overflow-y: scroll;
    width: 100%;
    height: 6rem;
    overflow: auto;
    /*display: -webkit-box;*/
  }

  .tfooterbox {
    width: 6.83rem;
    margin: 0 auto 0.45rem;
    height: 5.5rem;
    overflow: hidden;
    padding: 1rem 0.74rem 0 0.58rem;
  }

  .NumListbox {
    overflow: hidden;
    margin-bottom: 0.29rem;
    padding-right: 0.3rem;
  }

  .numbertxt {
    font-size: 0.60rem;
    font-family: HYJinChangTiJ;
    font-weight: bold;
    color: rgba(244, 192, 142, 1);
    margin-right: 0.25rem;
  }

  .sortImg {
    width: 0.88rem;
    height: 0.88rem;
    margin-right: 0.27rem;
    border-radius: 50%;
  }

  .sortpeple {
    font-size: 0.28rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(216, 216, 216, 1);
  }

  .sortpeplethr {
    font-size: 0.28rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: #fff;
  }

  .moneyshow {
    font-size: 0.40rem;
    font-family: AlternateGothicNo2BT-Regular;
    font-weight: 400;
    color: rgba(244, 192, 142, 1);
    line-height: 0.88rem;
  }

  .moneyshowthr {
    font-size: 0.36rem;
    font-family: AlternateGothicNo2BT-Regular;
    font-weight: 400;
    line-height: 0.88rem;
    color: rgba(0, 0, 0, 1);
  }

  /*btn*/

  .btn {
    width: 50%;
    height: 0.95rem;
    background: rgba(244, 192, 142, 1);
    font-size: 0.36rem;
    font-family: SimSun;
    text-align: center;
    line-height: 0.88rem;
    font-weight: 400;
    color: rgba(0, 0, 6, 1);
  }

  .tbtn {
    width: 50%;
    height: 0.95rem;
    background: rgba(33, 33, 33, 1);
    text-align: center;
    line-height: 0.95rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .btmouter_box{
    width:7.5rem;
    height:0.95rem;
    font-size: 0.30rem;
    text-align: center;
    line-height: 0.95rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    position: fixed;
    bottom: 0;
    z-index: 999999;
  }
  .thbtn{
    width:50%;
    height:0.95rem;
    background: rgba(255, 126, 0, 1);
  }
  .thbtnOne{
    width:15%;
    height:0.95rem;
    background: rgba(255, 126, 0, 1);
  }
  .thbtnOneTH{
    width:15%;
    height:0.95rem;
    background: rgba(200, 80, 0, 1);
  }
  .thbtnTwo{
    width:45%;
    height:0.95rem;
    background: rgba(255, 126, 0, 1);
  }
  .thbtnTwoTH{
    width:45%;
    height:0.95rem;
    background: rgba(255, 126, 0, 1);
  }
  .invitationbtn{
    width:50%;
    height:0.95rem;
    background: #42b140;
    color:#fff;
  }
  .invitationbtnDis{
    width:40%;
    height:0.95rem;
    background: #42b140;
    color:#fff;
  }
  /*position*/

  .positionbox,
  .tposibox {
    width: 1rem;
    position: fixed;
    right: 0.35rem;
    bottom: 17%;
    z-index: 999;
  }

  .positionbox li {
    width: 1rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    background: rgba(244, 192, 142, 0.8);
    border-radius: 50%;
    font-size: 0.2rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 6, 1);
    margin-bottom: 0.14rem;
  }

  .tposibox li {
    width: 1rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-size: 0.2rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 6, 1);
    margin-bottom: 0.14rem;
    box-shadow: NaNpx NaNpx 32px 3px rgba(4, 0, 0, 0.43);
  }

  .imgP {
    width: 0.52rem;
    height: 0.51rem;
    vertical-align: middle;
  }

  .imgN {
    width: 0.49rem;
    height: 0.55rem;
    vertical-align: middle;
  }

  .timgP {
    width: 0.52rem;
    height: 0.51rem;
    vertical-align: middle;
  }

  .timgN {
    width: 0.49rem;
    height: 0.55rem;
    vertical-align: middle;
  }

  /*bullet_screen*/

  .bulletimg {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.2rem;
    margin: 0.03rem 0.1rem 0 0.08rem;
    border-radius: 50%;
  }

  .backg {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bullet_screenY {
    position: absolute;
    /*top: 0.68rem;*/
    transform: translateX(40vw);
    animation: goY 8s ease-in infinite;
    width: 4.0rem;
    height: 0.57rem;
    font-size: 0.16rem;
    color: #fff;
    background: #2c2b2b;
    opacity: 0.8;
    border-radius: 1rem;
    line-height: 0.57rem;
  }

    @keyframes goY {
      from {
        transform: translateY(5vw);
      }
      to {
        transform: translateY(-60vw);
      }
    }

  .bullet_screen {
    position: absolute;
    /*top: 0.68rem;*/
    transform: translateX(40vw);
    animation: go 12s ease-in infinite;
    width: 4rem;
    height: 0.57rem;
    font-size: 0.16rem;
    color: #fff;
    background: #2c2b2b;
    opacity: 0.8;
    border-radius: 1rem;
    line-height: 0.57rem;

    /*/固定不动*/
    position: fixed;
    bottom: 0;
    z-index: 999999;
  }

  @keyframes go {
    from {
      transform: translateX(70vw);
    }
    to {
      transform: translateX(-100vw);
    }
  }

  .swiper-container {
    width: 6.5rem;
    height: 3.78rem;
    margin: 0 auto;
  }

  .swiper-container1 {
    height: 1.8rem;
    margin-bottom: 0.26rem;
  }

  .swiper-wrapper {
    width: 6.5rem;
    height: 3.78rem;
  }

  .swiper-wrapper1 {
    height: 1.8rem;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    height:auto;
    border-radius:0.6rem;
  }


  .swiper-slide1 {
    height: 1.8rem
  }

  img {
    width: 100%;
    height: 100%;
  }

  .swiper-pagination-bullet {
    width: 0.833rem;
    height: 0.833rem;
    display: inline-block;
    background: #7c5e53;
  }

  /*弹窗*/

  #opens_windows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(122, 122, 122, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    /*display: none;*/
  }

  .windowbox_center {
    width: 6.00rem;
    /*height: 7.50rem;*/

  }

  .rqewm {
    font-size: 0.42rem;
    color: #fff;
    text-align: center;
    margin: 0rem auto;
    font-family: PingFangSC-Medium;
  }

  .about_title {
    font-size: 0.32rem;
    margin: 0.4rem auto;
    text-align: center;
    font-family: PingFangSC-Medium;
    color: rgba(102, 102, 102, 1);
  }

  .zfbimg {
    width: 80%;
    height: 90%;
    margin-top:11px
  }

  .about_main {
    width: 3.72rem;
    margin: 0 auto;
    font-size: 0.2rem;
    font-family: PingFang-SC-Regular;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    margin-bottom: 0.4rem;
  }

  .sure_btns {
    width: 1.5rem;
    height: 0.4rem;
    text-align: center;
    font-size: 0.28rem;
    font-family: PingFang-SC-Regular;
    color: #EF7020;
    margin: 0 auto;
  }

  .postPhoneinp {
    width: 90%;
    height: 0.9rem;
    font-size: 0.32rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0.2rem;
    border: 0;
    border-radius: 0.15rem;
  }

  .goBuying {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.32rem;
    background: orange;
    color: #fff;
  }

  .xdelete {
    position: absolute;
    right: 0.2rem;
    top: 0.7rem;
    color: #fff;
    font-size: 0.54rem;
  }

  #audioPLay{
    width:0.5rem;
    height:0.5rem;
    position: absolute;
    right:0.2rem;
    top:0.15rem;
    z-index:1000000;
  }
  .indexInfo{
    color: rgb(255, 255, 255);
    font-size:0.3rem;

  }

</style>
